<template>
  <div v-if="isShow">
    <!-- 合计 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      size="mini"
      v-show="isShowTotal"
    >
      <el-table-column prop="saleAmount" label="销售总额（元）" align="center">
      </el-table-column>
      <el-table-column
        prop="paidInAmount"
        label="实收总额（元）"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="discountMoneyAmount"
        label="折扣总额（元）"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="writeoffAmount" label="核销笔数" align="center">
      </el-table-column>
    </el-table>
    <div v-show="isShowOne">
      <div class="activityName">
        {{ activityNameList.length > 0 ? activityNameList[0] : "" }}
      </div>
      <div class="flex-layout">
        <div id="circle" style="width: 400px;height:300px;"></div>
        <div id="circle2" style="width: 400px;height:300px;"></div>
        <div id="main" style="width: 400px;height:300px;"></div>
      </div>
    </div>
    <div v-show="isShowTwo">
      <div class="activityName">
        {{ activityNameList.length > 1 ? activityNameList[1] : "" }}
      </div>
      <div class="flex-layout">
        <div id="circle3" style="width: 400px;height:300px;"></div>
        <div id="circle4" style="width: 400px;height:300px;"></div>
        <div id="main2" style="width: 400px;height:300px;"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import { listActivityApi } from "@s/api";
export default {
  name: "echartCom",
  data() {
    return {
      isShow: false,
      isShowOne: false,
      isShowTwo: false,
      isShowTotal: false,
      activityNameList: [],
      form: {
        activityIds: "",
        orderType: "2" // 特许
      },
      tableData: [],
      activityList: []
    };
  },
  props: ["echartForm", "activityName"],
  mounted() {},
  methods: {
    getList() {
      let json = JSON.parse(JSON.stringify(this.form));
      json.activityIds = this.form.activityIds.join(","); // 格式转化 数组转字符串
      listActivityApi(json).then(res => {
        let tableitem = {
          discountMoneyAmount: res.discountMoneyAmount, // 折扣金额（元） ,
          saleAmount: res.saleAmount, //   销售总额（元） ,
          paidInAmount: res.paidInAmount, //  实收金额（元） ,
          writeoffAmount: res.writeoffAmount //   核销比数 ,
        };
        this.tableData = [tableitem];
        this.activityList = res.activityStatisticsChartList;
        this.activityListShow();
      });
    },
    activityListShow() {
      if (this.activityList.length > 0) {
        this.isShowTotal = true;
      } else {
        this.isShowTotal = false;
      }
      if (this.activityList.length == 1) {
        this.isShowOne = true;
        this.getData("main", 1);
        this.getCircle("circle", 1);
        this.getCircle2("circle2", 1);
        this.isShowTwo = false;
      } else if (this.activityList.length == 2) {
        this.isShowTwo = true;
        this.isShowOne = true;
        this.getData("main", 1);
        this.getCircle("circle", 1);
        this.getCircle2("circle2", 1);
        this.getData("main2", 2);
        this.getCircle("circle3", 2);
        this.getCircle2("circle4", 2);
      } else {
        this.isShowTwo = false;
        this.isShowOne = false;
      }
    },
    getCircle2(val, num) {
      let payTypedata = [];
      if (num == 1) {
        payTypedata.push({
          value: this.activityList[0].alipayMoney,
          name: "支付宝"
        });
        payTypedata.push({
          value: this.activityList[0].wechatMoney,
          name: "微信"
        });
      } else {
        payTypedata.push({
          value: this.activityList[1].alipayMoney,
          name: "支付宝"
        });
        payTypedata.push({
          value: this.activityList[1].wechatMoney,
          name: "微信"
        });
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(val));
      var option = {
        title: {
          x: "center",
          text: "支付方式统计",
          subtext: "单位：元",
          textStyle: {
            fontSize: 14
          },
          subtextStyle: {
            fontSize: 12
          }
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          //   data: ["微信", "支付宝"]
          data: []
        },
        series: [
          {
            color: ["#60C1EF", "#FFCC67"],
            name: "支付方式",
            type: "pie",
            radius: "50%", // 控制大小
            center: ["50%", "50%"], // 控制大小
            label: {
              normal: {
                formatter: "{b} {d}%"
              }
            },
            data: payTypedata,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getCircle(val, num) {
      let productData = [];
      if (num == 1) {
        this.activityList[0].categoryStatisticsDTOS.forEach(item => {
          let itemObj = {
            value: item.salesAmount,
            name: item.categoryName
          };
          productData.push(itemObj);
        });
      } else {
        this.activityList[1].categoryStatisticsDTOS.forEach(item => {
          let itemObj = {
            value: item.salesAmount,
            name: item.categoryName
          };
          productData.push(itemObj);
        });
      }
      if (productData.length <= 5) {
        productData.pop();
      }
      if (productData.length == 0) {
        productData.push({ name: "空", value: 0 });
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(val));
      var option = {
        title: {
          x: "center",
          text: "商品分类销售统计",
          subtext: "单位：件",
          textStyle: {
            fontSize: 14
          },
          subtextStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          //   data: ["主食", "零食", "爆米花套餐", "甜品", "饮品", "其他"]
          data: []
        },
        series: [
          {
            color: [
              "#60C1EF",
              "#AF89D6",
              "#86D560",
              "#FF999A",
              "#FFCC67",
              "#80A3DB"
            ],
            name: "商品分类销售",
            type: "pie",
            radius: "50%", // 控制大小
            center: ["50%", "50%"], // 控制大小
            label: {
              normal: {
                formatter: "{b} {d}%"
              }
            },
            data: productData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getData(val, num) {
      // 数字转换成万
      function numberFormat(value) {
        var k = 10000;
        value = (value / k).toFixed(2);
        return value;
      }
      let venueFloorData = [];
      let NumData = [];
      if (num == 1) {
        this.activityList[0].venueFloorStatisticsDTOS.forEach(item => {
          venueFloorData.push(item.venueFloorName);
          NumData.push(numberFormat(item.salesAmount));
        });
      } else {
        this.activityList[1].venueFloorStatisticsDTOS.forEach(item => {
          venueFloorData.push(item.venueFloorName);
          NumData.push(numberFormat(item.salesAmount));
        });
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(val));
      // 指定图表的配置项和数据
      var option = {
        title: {
          x: "center",
          text: "楼层销售统计",
          subtext: "单位：万元",
          textStyle: {
            fontSize: 14
          },
          subtextStyle: {
            fontSize: 12
          }
        },
        // grid: {
        //   // 控制大小
        //   x: 25,
        //   y: 45,
        //   x2: 5,
        //   y2: 20,
        //   borderWidth: 1
        // },
        tooltip: {},
        legend: {
          left: "left",
          //   data: ["销量"]
          data: []
        },
        xAxis: {
          name: "楼层",
          data: venueFloorData,
          axisTick: {
            show: false
          }
        },
        yAxis: {
          //   axisLine: {
          //     show: false
          //   },
          name: "销售金额",
          minInterval: 1,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            color: ["#60C1EF"],
            name: "销售金额",
            barWidth: 30,
            type: "bar",
            data: NumData,
            label: {
              normal: {
                position: "top",
                show: true
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  watch: {
    echartForm(val) {
      if (val.length > 0) {
        this.form.activityIds = val;
        this.getList();
        this.isShow = true;
      } else {
        this.isShow = false;
        this.isShowOne = false;
        this.isShowTwo = false;
        this.isShowTotal = false;
      }
    },
    activityName(val) {
      if (val.length > 0) {
        this.activityNameList = val;
      }
    }
  }
};
</script>
<style scoped lang="scss">
.flex-layout {
  // margin-left: 10px;
  margin-top: 30px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  div {
    float: left;
  }
}
.activityName {
  margin-top: 30px;
  margin-left: 30px;
  font-size: 14px;
}
</style>
